<template>
	<view id="app">
		<!-- 订单列表 -->
		<scroll-view scroll-X class="navBar" enable-flex>
			<view class="nav" :class="index == current ? 'active' : ''" v-for="(item,index) in topNav" :key="index"
				@click="change(index)">
				<view class="item">
					<view class="txt">{{item.name}}({{item.num}})</view>
					<view class="line"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 列表 -->
		<view class="order mt30 mlr30">

			<!-- 订单列表 -->
			<view class="list area mb30 pt10 plr25"  v-for="(item,index) in wrap.list"
				:key="index">
				<!-- 上 -->
				<view class="top rows ptb15 bdb1se">
					<!-- 商家信息 -->
					<view class="shop df aic">
						<view class="proImg wh40">
							<image :src="item.sellData.shop_logo" mode="aspectFill"></image>
						</view>
						<view class="name ml5 c333 f28">{{item.sellData.shop_name}}</view>	
					</view>
					<!-- 订单状态 -->
					<view class="state c333 f28">{{item.status_text}}</view>
				</view>
				<!-- 内容 -->
				<view class="mid df ais ptb20 bdb1se" @click="router(item.goods_id)">
					<!-- 商品图片 -->
					<view class="proImg img180">
						<image :src="item.goodsData.images[0]" mode="aspectFill" lazy-load></image>
					</view>
					<!-- 商品信息 -->
					<view class="proInfo df dfc dfsb oh ml20 f1">
						<!-- 商品名称 -->
						<view class="title t2hd c333 f32">{{item.goodsData.name}}</view>
						<!-- 申请时间 -->
						<view class="time c999 f28">申请时间：{{item.createtime}}</view>
						<!-- 价格 -->
						<view class="price cFF9646 f28">￥{{item.goodsData.price}}</view>
					</view>
				</view>

				<!-- 功能区 -->
				<view class="botFn df dfr ptb20" v-if="item.status == 2">
					<view class="mr30">
						<view class="btn cancel w150" @click="toDetail(item)">查看详情</view>
					</view>
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="target = index;propose()">提出异议</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;confirm()">确认合作</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else-if="item.status == 3">
					<view class="mr30">
						<view class="btn cancel w150"@click="toDetail(item)">查看详情</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;castoff()">解除合作</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else>
					<view>
						<view class="btn prmary w150" @click="toDetail(item)">查看详情</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 头部列表
				topNav: [{
						status: '',
						name: '全部',
						num:0
					},
					{
						status: '1',
						name: '待处理',
						num:0
					},
					{
						status: '2',
						name: '待合作',
						num:0
					},
					{
						status: '3',
						name: '合作中',
						num:0
					},
					{
						status: '4,5,6',
						name: '已结束',
						num:0
					},
				],
				// 下标
				current: 0,
				// 内容
				wrap: {
					// 页码
					page: 1,
					// 列表
					list: [],
					// 是否加载
					ifLoad: false,
				},
				// 下标
				target: '',
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断类型
			if (e.type) {
				// 赋值下标
				that.current = Number(e.type) - 1;
			}

			// 订单列表
			that.order_list();
			that.getordernum()
		},

		// 页面触底
		onReachBottom() {
			// 判断是否可以加载
			if (that.wrap.ifLoad) {
				// 增加页码
				that.wrap.page++;

				// 订单列表
				that.order_list();
			}
		},

		// 方法集
		methods: {
			router(id){
				console.log('2222');
				uni.navigateTo({
					url:'./proshop?id='+id
				})
			},
			//订单表头数据
			getordernum() {
				console.log(2);
				var that = this
				// 请求接口
				that.request({
					url: '/api/index/promotenum',
					// 上传数据
					data: {
						token: uni.getStorageSync('token'),
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							that.topNav[0].num = rs.data[0]
							that.topNav[1].num = rs.data[1]
							that.topNav[2].num = rs.data[2]
							that.topNav[3].num = rs.data[3]
							that.topNav[4].num = rs.data[4]
						}
					}
				})
			},
			
			// 解除合作
			castoff() {
				// 弹窗提示
				that.alert({
					value: '解除之后则您的所有下级人员或将无法购买该商品，确认解除合作吗？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 新建对象
							var obj = {
								// 订单状态
								status: 5,
								// 商家接触合作时间
								user_time: Date.parse(new Date())/1000,
							}

							// 改变状态
							that.util.changeStatus(obj, that);
						};
					},
				});
			},

			// 合作
			confirm() {
				// 新建对象
				var obj = {
					status: 3,
				}

				// 改变状态
				that.util.changeStatus(obj, that);
			},

			// 提出异议
			propose() {
				// 弹窗提示
				that.alert({
					value: '确认提出异议',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 新建对象
							var obj = {
								// 订单状态
								status: 1,
								// 异议状态
								state: 2,
							}

						// 改变状态
						that.util.changeStatus(obj, that);
						}
					},
				});
			},

			// 订单列表
			order_list() {
				// 变量
				var wrap = that.wrap;

				// 判断页码
				if (wrap.page == 1) {
					// 清空列表
					that.wrap.list = [];
				}

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'promote',
						// 订单状态
						status: that.topNav[that.current].status,
						// 页
						page: wrap.page,
						// 条
						count: 10,
						// 自己
						mine: 1,
					},
					// 加载
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值列表
							wrap.list.push(...rs.data);

							// 判断数据是否可以加载
							if (rs.data[9]) {
								wrap.ifLoad = true;
							} else {
								wrap.ifLoad = false;
							}

							// 赋值内容
							that.wrap = wrap;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 切换下标
			change(index) {
				// 判断是否相等
				if (that.current == index) {
					return;
				}

				// 赋值下标
				that.current = index;

				// 订单列表
				that.order_list();
			},

			// 跳转详情
			toDetail(item) {
				console.log('2222321312312');
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/shop/tuidetail?type=1&id=' + item.id,
				})
			},
		},
	};
</script>
<style lang="less">
	@active: #FFA351;

	// 导航条
	.navBar {
		display: flex;
		height: 100rpx;
		white-space: nowrap;
		background-color: white;

		// 导航块
		.nav {
			display: inline-block;
			flex: 1;
			text-align: center;

			// 内容
			.item {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				padding: 20rpx 30rpx;

				// 文字
				.txt {
					color: #666;
					font-size: #333;
					transition: .3s;
				}

				// 线
				.line {
					width: 0;
					height: 10rpx;
					margin: 0 auto;
					background-color: @active;
					border-radius: 100rpx;
					transition: .3s;
				}
			}
		}

		// 激活
		.active {

			// 项
			.item {

				// 文字
				.txt {
					color: @active;
				}

				// 线
				.line {
					width: 100%;
				}

			}
		}
	}

	// 订单
	.order {

		// 按钮
		.btn {
			padding-top: 15rpx;
			padding-bottom: 15rpx;
		}
	}
</style>
